<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Websanova Paint</title>
    <script type="text/javascript" src="/js/jquery.1.8.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.core.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.widget.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.mouse.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.draggable.min.js"></script>
    <script type="text/javascript" src="/js/wColorPicker.js"></script>
    <script type="text/javascript" src="/js/wPaint.js"></script>

    <link rel="Stylesheet" type="text/css" href="/css/wColorPicker.css" />
    <link rel="Stylesheet" type="text/css" href="/css/wPaint.css" />
</head>
<body>
<h2>Load Image With Background</h2>

<table>
    <tr>
        <td>
            <div id="wPaint2" style="background-image: url('/testdata/sj.jpg'); position:relative; border:solid black 1px;"></div>
        </td>
        <td><img id="canvasImage2" src=""/></td>
    </tr>
    <tr>
        <td colspan="2">
            <div style="  position: fixed; z-index: 999;top:0">
                <a href="javascript:saveImage2();">save image</a> |
                <a href="javascript:transPaint();">旋转</a> |
            </div><br/>
        </td>
    </tr>
</table>

<br/><br/>

<script type="text/javascript">
    var num = 0;

    $('#wPaint2').css({
        width:500,
        height: 375
    });

    $("#wPaint2").wPaint({
        menuOrientation: 'vertical',
        image: ''
    });

    function saveImage2() {
        var imageData2 = $("#wPaint2").wPaint("image");
        $("#canvasImage2").attr('src', imageData2);
    }

    function transPaint(){
        num++;
        $('#wPaint2').transform(num);
    }
</script>
</body>
</html>